<template>
    <view class="tag-list-component">
        <!-- 加载状态 -->
        <view class="loading-container" v-if="isLoading">
            <text class="loading-text">正在加载标签...</text>
        </view>

        <!-- 空状态 -->
        <view class="empty-container" v-else-if="!isLoading && safeTagCategories.length === 0">
            <text class="empty-text">暂无标签数据</text>
        </view>

        <!-- 标签列表 -->
        <view class="label-list" v-else>
            <view class="label-list-item" v-for="(category, index) in safeTagCategories" :key="index">
                <view class="image-text_1 flex flex-col">
                    <image class="label_2" referrerpolicy="no-referrer" :src="apiHost + (category.tagIcon || '')" />
                    <text class="text-group_1">{{ category.tagName }}</text>
                </view>
                <view class="box_3 flex">
                    <view class="box_4 flex-col">
                        <view class="group_1 flex-row">
                            <template v-if="category && category.sonTagObj && Array.isArray(category.sonTagObj) && category.sonTagObj.length > 0">
                                <span v-for="(tag, tagIndex) in getValidTags(category.sonTagObj)" :key="getSafeKey(tag, tagIndex)"
                                    class="text-wrapper_1 flex-col item-box" :class="{ 'selected': isTagSelected(tag) }"
                                    @click.stop="handleTagClick(tag, $event)">
                                    {{ tag.tagName }}
                                </span>
                            </template>
                        </view>
                    </view>
                </view>
                <view class="image-text_4 flex flex-row justify-between" @click="handleChangeTagList(category && category.id)">
                    <image class="thumbnail_4" referrerpolicy="no-referrer" src="https://hxs.dsjhs.com:553/prod-api/profile/chang-icon.png" width="16px"
                        height="16px" />
                    <text class="text-group_4">换一批</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { getTagList } from '@/common/api_meethuangshi.js'

export default {
    name: 'TagList',
    props: {
        // API主机地址
        apiHost: {
            type: String,
            default: require("@/common/appInfo.js").api_host
        },
        // 初始已选择的标签
        initialSelectedLabels: {
            type: Array,
            default: () => []
        },
        // 标签数据
        tagData: {
            type: Array,
            default: () => []
        },
        // 加载状态
        loading: {
            type: Boolean,
            default: false
        },
        // 筛选特定类型的标签分类，传入数组时只显示指定的标签类型
        filterCategories: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            selectedLabels: [], // 当前选中的标签
            internalTagData: [], // 内部标签数据副本，用于换一批操作
            internalLoading: false, // 内部加载状态
        }
    },
    mounted() {
        // 初始化数据
        this.selectedLabels = [...this.initialSelectedLabels]
        
        // 如果有初始数据，直接使用；否则检查是否需要自动加载
        if (this.tagData && this.tagData.length > 0) {
            this.internalTagData = [...this.tagData]
            // 将所有 userSetTag 为 true 的标签加入到 selectedLabels 中
            this.initializeUserSetTags()
        } else {
            // 检查是否需要自动加载数据
            this.checkAndLoadData()
        }
    },
    watch: {
        // 监听选中标签变化，通知父组件
        selectedLabels: {
            handler(newVal, oldVal) {
                // 避免初始化时的不必要emit
                if (oldVal !== undefined) {
                    this.$emit('selected-labels-change', newVal)
                }
            },
            deep: true
        },
        // 监听父组件传入的标签数据变化
        tagData: {
            handler(newVal) {
                console.log(newVal, 'newVal')

                if (newVal && newVal.length > 0) {
                    // 如果父组件传入了有效数据，使用父组件的数据
                    this.internalTagData = [...newVal]
                    // 当标签数据更新时，重新初始化 userSetTag 为 true 的标签
                    this.$nextTick(() => {
                        this.initializeUserSetTags()
                    })
                } else {
                    // 如果父组件传入的数据为空，检查是否需要自动加载
                    this.checkAndLoadData()
                }
            },
            deep: true,
            immediate: true
        }
    },
    computed: {
        // 安全的标签分类数据
        safeTagCategories() {
            if (!Array.isArray(this.internalTagData)) {
                return []
            }
            // 过滤掉无效的分类对象
            let validCategories = this.internalTagData.filter(category => category && typeof category === 'object')
            
            // 如果有filterCategories参数，进行进一步过滤
            if (Array.isArray(this.filterCategories) && this.filterCategories.length > 0) {
                validCategories = validCategories.filter(category => {
                    return category.tagName && this.filterCategories.includes(category.tagName)
                })
            }
            
            return validCategories
        },
        // 综合的加载状态（外部loading或内部loading）
        isLoading() {
            return this.loading || this.internalLoading
        }
    },
    methods: {
        // 检查并加载数据
        checkAndLoadData() {
            // 如果 tagData 为空或者没有有效数据，则自动加载
            if (!this.tagData || this.tagData.length === 0) {
                this.loadInitialTagData()
            }
        },
        // 加载初始标签数据
        async loadInitialTagData() {
            if (this.internalLoading) {
                return // 防止重复请求
            }
            
            this.internalLoading = true
            
            try {
                const res = await getTagList({})
                console.log('自动加载标签数据:', res)
                
                if (res.code === 200 && res.data && Array.isArray(res.data)) {
                    this.internalTagData = res.data
                    // 初始化 userSetTag 为 true 的标签
                    this.$nextTick(() => {
                        this.initializeUserSetTags()
                    })
                } else {
                    console.warn('标签数据加载失败:', res.message)
                    uni.showToast({
                        title: res.message || '标签加载失败',
                        icon: 'none'
                    })
                }
            } catch (error) {
                console.error('自动加载标签数据失败:', error)
                uni.showToast({
                    title: '标签加载失败',
                    icon: 'none'
                })
            } finally {
                this.internalLoading = false
            }
        },
        // 生成安全的 key 值
        getSafeKey(item, fallback) {
            if (!item || typeof item !== 'object') return fallback
            if (item.id) return item.id
            if (item.tagName) return item.tagName
            return fallback
        },
        // 过滤有效的标签数据
        getValidTags(sonTagObj) {
            if (!Array.isArray(sonTagObj)) {
                return []
            }
            return sonTagObj.filter(tag => {
                return tag && 
                       typeof tag === 'object' && 
                       tag.tagName && 
                       typeof tag.tagName === 'string' && 
                       tag.tagName.trim() !== ''
            })
        },
        // 安全的标签点击处理
        handleTagClick(tag, event) {
            // 二次验证tag的有效性
            if (!tag || 
                typeof tag !== 'object' || 
                !tag.tagName || 
                typeof tag.tagName !== 'string' ||
                tag.tagName.trim() === '') {
                console.warn('点击事件中的tag无效，跳过处理')
                return
            }
            
            // 直接调用toggleLabel方法
            this.toggleLabel(tag, event)
        },
        // 标签选择切换
        toggleLabel(tag, event) {
            // 检查 tag 是否有效
            if (!tag || typeof tag !== 'object') {
                console.warn('tag 为空或无效，跳过标签切换操作')
                return
            }
            
            // 使用id作为主要标识，如果没有id则使用tagName
            console.log('当前选中的标签:', this.selectedLabels)
            
            // 处理 selectedLabels 为空的情况
            if (!this.selectedLabels || this.selectedLabels.length === 0) {
                this.selectedLabels = [tag];
                // 如果有 userSetTag 属性，标记为用户选中
                if (tag.hasOwnProperty('userSetTag')) {
                    this.$set(tag, 'userSetTag', true);
                }
                return;
            }
            
            const index = this.selectedLabels.findIndex(item => {
                if (item && tag.id && item.id) {
                    return item.id === tag.id;
                }
                return item && item.tagName === tag.tagName;
            });

            if (index > -1) {
                // 取消选中
                this.selectedLabels.splice(index, 1);
                // 如果标签有 userSetTag 属性，将其设置为 false
                if (tag.hasOwnProperty('userSetTag')) {
                    this.$set(tag, 'userSetTag', false);
                }
            } else {
                // 选中标签
                this.selectedLabels.push(tag);
                // 如果有 userSetTag 属性，标记为用户选中
                if (tag.hasOwnProperty('userSetTag')) {
                    this.$set(tag, 'userSetTag', true);
                }
            }
        },
        // 换一批标签 - 直接在组件内部处理
        async handleChangeTagList(categoryId) {
            // 检查 categoryId 是否有效
            if (!categoryId) {
                console.warn('categoryId 为空，跳过换一批操作')
                return
            }
            
            try {
                console.log(this.selectedLabels, 'handleChangeTagList')
                
                // 获取当前分类中userSetTag为true的标签ID
                const currentCategory = this.internalTagData.find(category => category && category.id === categoryId)
                let userTagIds = ''
                
                if (currentCategory && currentCategory.sonTagObj && Array.isArray(currentCategory.sonTagObj)) {
                    const userSetTagIds = currentCategory.sonTagObj
                        .filter(tag => tag && tag.userSetTag === true && tag.id) // 找到userSetTag为true且有id的标签
                        .map(tag => tag.id) // 提取id
                    
                    if (userSetTagIds.length > 0) {
                        userTagIds = userSetTagIds.join(',') // 用逗号拼接
                    }
                }
                
                console.log('当前分类userSetTag为true的标签ID:', userTagIds)
                
                const res = await getTagList({
                    fatherId: categoryId,
                    userTaglds: userTagIds
                })
                console.log('换一批标签数据:', res)
                if (res.code === 200 && res.data && Array.isArray(res.data)) {
                    // 找到对应的分类并更新其子标签
                    const categoryIndex = this.internalTagData.findIndex(category => category && category.id === categoryId)
                    if (categoryIndex !== -1 && res.data.length > 0) {
                        // 确保 sonTagObj 是数组格式并过滤无效数据
                        let sonTagObj = []
                        if (res.data[0] && res.data[0].sonTagObj) {
                            const rawSonTagObj = Array.isArray(res.data[0].sonTagObj) ? res.data[0].sonTagObj : []
                            sonTagObj = this.getValidTags(rawSonTagObj)
                        }
                        // 更新分类的子标签
                        this.$set(this.internalTagData[categoryIndex], 'sonTagObj', sonTagObj)
                        console.log('更新分类子标签:', this.internalTagData[categoryIndex])
                    }
                } else {
                    uni.showToast({
                        title: res.message || '标签加载失败',
                        icon: 'none'
                    })
                }
            } catch (error) {
                console.error('换一批标签失败:', error)
                uni.showToast({
                    title: '标签加载失败',
                    icon: 'none'
                })
            }
        },
        // 初始化 userSetTag 为 true 的标签
        initializeUserSetTags() {
            if (!Array.isArray(this.internalTagData)) {
                return
            }
            
            this.internalTagData.forEach(category => {
                if (category && category.sonTagObj && Array.isArray(category.sonTagObj)) {
                    category.sonTagObj.forEach(tag => {
                        if (tag && tag.userSetTag === true) {
                            // 检查是否已经在 selectedLabels 中
                            const exists = this.selectedLabels.some(item => {
                                if (item && tag.id && item.id) {
                                    return item.id === tag.id;
                                }
                                return item && item.tagName === tag.tagName;
                            });
                            
                            // 如果不存在，则添加到 selectedLabels 中
                            if (!exists) {
                                this.selectedLabels.push(tag);
                            }
                        }
                    });
                }
            });
        },
        // 判断标签是否被选中
        isTagSelected(tag) {
            // 检查 tag 是否有效
            if (!tag || typeof tag !== 'object') {
                return false;
            }
            
            // 处理 selectedLabels 为空的情况
            if (!this.selectedLabels || this.selectedLabels.length === 0) {
                return false;
            }
            
            return this.selectedLabels.some(item => {
                if (item && tag.id && item.id) {
                    return item.id === tag.id;
                }
                return item && item.tagName === tag.tagName;
            });
        }
    }
}
</script>

<style lang="scss" scoped>
.tag-list-component {
    width: 100%;

    .loading-container {
        margin: 40px 0;
        text-align: center;

        .loading-text {
            color: rgba(52, 49, 79, 0.6);
            font-size: 14px;
        }
    }

    .empty-container {
        margin: 40px 0;
        text-align: center;

        .empty-text {
            color: rgba(52, 49, 79, 0.6);
            font-size: 14px;
        }
    }

    .label-list-item {
        margin-top: 16px;
    }

    .image-text_1 {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;

        .label_2 {
            width: 24px;
            height: 24px;
            align-self: center;
        }

        .text-group_1 {
            overflow-wrap: break-word;
            color: rgba(52, 49, 79, 1);
            font-size: 18px;
            font-family: PingFangSC-Medium;
            font-weight: 500;
            text-align: left;
            white-space: nowrap;
            line-height: 25px;
            margin-left: 6px;
        }
    }

    .box_3 {
        width: 100%;
        margin-top: 16px;

        .box_4 {
			width: 100%;
            .group_1 {
                display: flex;
                width: 100%;
                gap: 8px;
                flex-wrap: wrap;

                .item-box {
                    padding: 8px 26px 8px 26px;
                    overflow-wrap: break-word;
                    color: rgba(52, 49, 79, 1);
                    font-size: 14px;
                    font-weight: normal;
                    text-align: left;
                    white-space: nowrap;
                    line-height: 20px;
                    border-radius: 14px;
                    background: rgba(52, 49, 79, 0.06);
                    cursor: pointer;
                }

                .item-box.selected {
                    color: #319EFF;
                    background: linear-gradient(141deg, rgba(238, 165, 247, 1), rgba(49, 158, 255, 1));
                    border-radius: 14px;
                    position: relative;
                    z-index: 1;
                }

                .item-box.selected::before {
                    content: '';
                    position: absolute;
                    top: 2px;
                    left: 2px;
                    right: 2px;
                    bottom: 2px;
                    background: #FFFFFF;
                    border-radius: 12px;
                    z-index: -1;
                }
            }
        }
    }

    .image-text_4 {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        margin: 16px 0 0 0;
        padding-bottom: 12px;
        border-bottom: 1px solid rgba(52, 49, 79, 0.08);
        cursor: pointer;

        .thumbnail_4 {
            width: 16px;
            height: 16px;
        }

        .text-group_4 {
            margin-left: 6px;
            overflow-wrap: break-word;
            color: rgba(52, 49, 79, 1);
            font-size: 12px;
            font-weight: normal;
            text-align: left;
            white-space: nowrap;
            line-height: 16px;
        }
    }
}
</style> 